<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>FusionCharts Documentation</title>
<link rel="stylesheet" href="Style.css" type="text/css" />
</head>
<body>
<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">
  <tr> 
    <td><span class="pageHeader">Using FusionCharts with RoR - Creating Drill-down charts </span></td>
  </tr>
  <tr> 
    <td valign="top" class="text"><p>In our previous example, we had used FusionCharts to plot a chart using data stored in database. We'll now extend that example itself to create a drill-down chart which can show more information.</p>
    <p>If you recall from previous example, we were showing the sum of factory output in a pie chart as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_DBOut.jpg" width="572" height="273" class="imageBorder" /></td>
  </tr>
  <tr>
    <td valign="top" class="text">In this example, we'll extend this example, so that when a user clicks on a pie slice for a factory, he can drill down to see date wise production for that factory. </td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Setting up the pie chart for Link </td>
  </tr>
  <tr>
    <td valign="top" class="text">To set up the pie chart to enable links for drill-down involves just minor tweaking of our previous example<span class="codeInline">. We basically need to add the <span class="codeInline">link</span> attribute for each<span class="codeInline"> &lt;set&gt;</span> element. 
  </tr>
  <tr>
    <td valign="top" class="codeBlock"><p><br />
<b>Controller: dbexample_controller.rb <br>  Action: basicdbexample</b></br>
    <font color="blue">
<br>
    </font> class DbexampleController < ApplicationController<br>
    def default<br>
&nbsp;&nbsp;&nbsp;oRs=''<br>
&nbsp;&nbsp;&nbsp;oRs2=''<br>
&nbsp;&nbsp;&nbsp;strQuery=''<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#strXML will be used to store the entire XML document generated</span><br>
&nbsp;&nbsp;&nbsp;strXML=''<br>
<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#We also keep a flag to specify whether we've to animate the chart or not.<br>
&nbsp;&nbsp;&nbsp;#If the user is viewing the detailed chart and comes back to this page, he shouldn't<br>
&nbsp;&nbsp;&nbsp;#see the animation again.</span><br>
&nbsp;&nbsp;&nbsp;animateChart=''<br>
&nbsp;&nbsp;&nbsp;animateChart = params[&quot;animate&quot;]<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Set default value of 1</span><br>
&nbsp;&nbsp;&nbsp;if animateChart==&quot;&quot;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;animateChart = &quot;1&quot;<br>
&nbsp;&nbsp;&nbsp;end <br>
<br>
<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Generate the chart element</span><br>
&nbsp;&nbsp;&nbsp;strXML = &quot;&lt;chart caption='Factory Output report' subCaption='By Quantity' pieSliceDepth='30' showBorder='1' formatNumberScale='0' numberSuffix=' Units' animation=' &quot; + animateChart.to_s + &quot;'&gt;&quot;<br>
<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Iterate through each factory</span><br>
&nbsp;&nbsp;&nbsp;oRs = Factorymaster.find(:all)<br>
<br>
&nbsp;&nbsp;&nbsp;oRs.each do |recordset|<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="codeComment">&nbsp;#Now create second recordset to get details for this factory</span><br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@oRs2 = Factoryoutput.find(:all,:conditions=&gt;[&quot;FactoryId=?&quot;,recordset.FactoryId.to_s])<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recordcount = @oRs2.length<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count = 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;quantity = 0<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while count &lt; recordcount<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;quantity = quantity + @oRs2[count][:Quantity].to_i<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;count = count + 1<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;<span class="codeComment">&nbsp;&nbsp;#puts quantity<br>
&nbsp;&nbsp;&nbsp;#Generate &lt;set label='..' value='..' link='...'/&gt; </span><br>
&nbsp;&nbsp;&nbsp;factoryid = &quot;&quot;<br>
&nbsp;&nbsp;&nbsp;@oRs2.each do |recordset2|<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if factoryid != recordset2.FactoryId<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>strXML = strXML + &quot;&lt;set label='&quot; + recordset.FactoryName + &quot;' value='&quot; + quantity.to_s + &quot;' link='&quot; + CGI.escape(&quot;/dbexample/detailed?FactoryId=&quot; + recordset.FactoryId.to_s) + &quot;'/&gt;&quot;</strong><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;factoryid = recordset2.FactoryId&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Finally, close &lt;chart&gt; element</span><br>
&nbsp;&nbsp;&nbsp;strXML = strXML + &quot;&lt;/chart&gt;&quot;<br>
<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create the chart - Pie 3D Chart with data from strXML</span><br>
<strong>&nbsp;&nbsp;&nbsp;@chart1= renderChart(&quot;/FusionCharts/Pie3D.swf&quot;, &quot;&quot;, strXML, &quot;FactorySum&quot;, 600, 300, false, false)<br>
</strong>end<br>
  end</p>
      <p><font color="blue"><br>
            </font>
        <b>View:</b><br>
        &lt;HTML&gt;<br />
  &nbsp; &lt;HEAD&gt;<br />
  &nbsp;&nbsp;&nbsp;&lt;TITLE&gt;	FusionCharts - Database and Drill-Down Example &lt;/TITLE&gt;<br />
  &nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;/FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;<br />
  &nbsp;&lt;/HEAD&gt;<br/>
  &nbsp;&lt;BODY&gt;<br/>
  <strong>&nbsp;&nbsp;&nbsp;&lt;%= @chart%&gt;</strong><br/>
  &nbsp;&lt;/BODY&gt;<br/>
  &lt;/HTML&gt;</p></td>
  
  </tr>
  <tr>
    <td valign="top" class="text"><p>As you can see in the code above, we're doing the following:</p>
      <ol>
        <li>Include <span class="codeInline">FusionCharts.js</span> JavaScript class 
      
        <li>Thereafter, we generate the XML data document by iterating through the recordset. We store the XML data in <span class="codeInline">strXML</span> variable. To each <span class="codeInline">&lt;set&gt;</span> element, we add the <span class="codeInline">link</span> attribute. We pass the factory id of the respective factory by appending it to the link. We finally URL Encode the link, which is a very important step. </li>
        <li>Finally, we render the chart using <span class="codeInline">renderChart()</span> method and pass <span class="codeInline">strXML</span> as <span class="codeInline">dataXML</span>. </li>
    </ol>      
    <p>Let's now shift our attention to next page.   </p></td>
  </tr>
  <tr>
    <td valign="top" class="text">&nbsp;</td>
  </tr>
  <tr>
    <td valign="top" class="header">Creating the detailed data chart page </td>
  </tr>
  <tr>
   
  <tr>
    <td valign="top" class="codeBlock"><p><br />
<b>Controller: dbexample_controller.rb <br>  Action: detailed</b></br>
    <font color="blue"> 
	<br>
    </font> class DbexampleController < ApplicationController<br>
&nbsp;def detailed<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#First, get the factory Id<br>
&nbsp;&nbsp;&nbsp;#Request the factory Id from Querystring</span><br>
&nbsp;&nbsp;&nbsp;fid = params["FactoryId"]<br>
&nbsp;&nbsp;&nbsp;oRs=''<br>
&nbsp;&nbsp;&nbsp;strQuery=''<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#strXML will be used to store the entire XML document generated</span><br>
&nbsp;&nbsp;&nbsp;strXML=''<br>
&nbsp;&nbsp;&nbsp;intCounter = 0<br>
&nbsp;&nbsp;&nbsp;<span class="codeComment">#Generate the chart element string</span><br>
&nbsp;&nbsp;&nbsp;strXML = "&lt;chart palette='2' caption='Factory " + fid.to_s + " Output ' &nbsp;&nbsp;&nbsp;subcaption='(In Units)' xAxisName='Date' showValues='1' 
	&nbsp;&nbsp;&nbsp;labelStep='2' &gt;"<br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Now, we get the data for that factory</span><br>
&nbsp;&nbsp;&nbsp;factoryid = Factorymaster.find_by_FactoryId(fid.to_s)<br>
&nbsp;&nbsp;&nbsp;oRs = Factoryoutput.find(:all,:conditions=>["FactoryId=?",factoryid[:FactoryId]])<br>
&nbsp;&nbsp;&nbsp;oRs.each do |recordset|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;set label='" + recordset.DatePro.to_s + "' value='" + recordset.Quantity.to_s + "'/&gt;"<br>
&nbsp;&nbsp;&nbsp;end<br>
&nbsp;&nbsp;&nbsp;strXML = strXML + "&lt;/chart&gt;"  <br>
&nbsp;&nbsp;<span class="codeComment">&nbsp;#Create the chart - Column 2D Chart with data from strXML</span><br>
&nbsp;&nbsp;<strong>&nbsp;@chart1=renderChart("/FusionCharts/Column2D.swf", "", strXML, "FactoryDetailed", 600, 300, false, false)</strong><br>
&nbsp;end<br>
    end</p>
      <p><font color="blue"><br>
        </font>
        <b>View</b><br>
        &lt;HTML&gt;<br />
&nbsp; &lt;HEAD&gt;<br />
&nbsp;&nbsp;&nbsp;&lt;TITLE&gt;	FusionCharts - Database and Drill-Down Example	&lt;/TITLE&gt;
&nbsp;&nbsp;<br />
&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;Javascript&quot; SRC=&quot;/FusionCharts/FusionCharts.js&quot;&gt;&lt;/SCRIPT&gt;
&nbsp;&nbsp;<br />
&nbsp;&lt;/HEAD&gt;<br />
&nbsp;&lt;BODY&gt;
&nbsp;&nbsp;<br/>
&nbsp;&nbsp;<strong>&nbsp;&lt;%= @chart1%&gt;</strong>&nbsp;<br/>
&nbsp;&lt;/BODY&gt;<br />
&lt;/HTML&gt;</p></td>
  <br />
    <tr>
    <td valign="top" class="text"><p>In this page, we're:</p>
      <ol>
        <li>Including  <span class="codeInline">FusionCharts.js</span> JavaScript class 
        <li>Requesting the factory id for which we've to show detailed data. This data was sent to us as querystring, as a part of pie chart link.</li>
        <li>We get the requisite data for this factory from database and then convert it into XML using string concatenation.</li>
        <li>Finally, we render a Column 2D chart using <span class="codeInline">renderChart()</span> method to show detailed data.</li>
      </ol>
    <p>When you now run the app, you'll see the detailed page as under: </p></td>
  </tr>
  <tr>
    <td valign="top" class="text"><img src="Images/Code_Drill.jpg" width="599" height="292" class="imageBorder" />&nbsp;</td>
  </tr>
</table>
</body>
</html>
